<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构建基于Spring Boot和Deepseek的问答系统 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            border-left: 4px solid #4a6cf7;
        }
        .hover-scale {
            transition: transform 0.3s ease;
        }
        .hover-scale:hover {
            transform: translateY(-5px);
        }
        .section-divider {
            border-top: 1px solid rgba(0,0,0,0.1);
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-4xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">构建智能问答系统</h1>
                    <p class="text-xl opacity-90 mb-8">Spring Boot + Deepseek + Spring AI 全栈解决方案</p>
                    <div class="flex space-x-4">
                        <a href="#getting-started" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">开始探索</a>
                        <a href="#demo" class="border border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-medium transition duration-300">查看演示</a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1739338247955-6f32e992-c40a-4ee4-9e11-b0207f50d03b.png" alt="问答系统架构图" class="rounded-lg shadow-xl hover-scale">
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container mx-auto max-w-4xl py-12 px-4">
        <!-- Introduction -->
        <section class="mb-20">
            <p class="text-xl text-gray-700 mb-8 leading-relaxed">
                在现代应用开发中，问答系统是一个常见的需求，尤其是在客服、教育和技术支持领域。本文将介绍如何使用 <strong>Spring Boot</strong>、<strong>Deepseek</strong> 和 <strong>Spring AI</strong> 构建一个简单的问答系统，并通过 <strong>Postman</strong> 调用 API 接口实现问答功能。
            </p>
            
            <!-- Tech Stack Visualization -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-12">
                <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center">
                    <i class="fas fa-layer-group text-blue-500 mr-3"></i> 技术栈架构图
                </h2>
                <div class="mermaid">
                    graph TD
                    A[用户界面] -->|HTTP请求| B[Spring Boot]
                    B -->|API调用| C[Spring AI]
                    C -->|模型推理| D[Deepseek]
                    D -->|返回结果| C
                    C -->|JSON响应| B
                    B -->|渲染结果| A
                </div>
            </div>
        </section>

        <!-- Tech Stack Section -->
        <section id="tech-stack" class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-3 flex items-center">
                <i class="fas fa-microchip text-blue-500 mr-3"></i> 1. 技术栈介绍
            </h2>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-xl shadow hover-scale">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-leaf text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">Spring Boot</h3>
                    </div>
                    <p class="text-gray-600">用于快速构建 Java 后端服务，提供自动配置和快速开发能力。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow hover-scale">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 p-3 rounded-full mr-4">
                            <i class="fas fa-brain text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">Deepseek</h3>
                    </div>
                    <p class="text-gray-600">高性能的深度学习推理框架，用于问答模型的推理。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow hover-scale">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full mr-4">
                            <i class="fas fa-robot text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">Spring AI</h3>
                    </div>
                    <p class="text-gray-600">Spring 生态中的 AI 工具包，用于简化 AI 模型的集成。</p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow hover-scale">
                    <div class="flex items-center mb-4">
                        <div class="bg-yellow-100 p-3 rounded-full mr-4">
                            <i class="fas fa-plug text-yellow-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">Postman</h3>
                    </div>
                    <p class="text-gray-600">用于测试和调用 API 接口的强大工具。</p>
                </div>
            </div>
        </section>

        <!-- Getting Started Section -->
        <section id="getting-started" class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-3 flex items-center">
                <i class="fas fa-tools text-blue-500 mr-3"></i> 2. 环境准备
            </h2>
            
            <p class="text-gray-700 mb-6">在开始之前，请确保你已经完成以下准备工作：</p>
            
            <div class="bg-white rounded-xl shadow overflow-hidden mb-8">
                <div class="p-6">
                    <ol class="list-decimal pl-6 space-y-4">
                        <li class="text-gray-700"><strong>安装 JDK 17 或更高版本</strong></li>
                        <li class="text-gray-700"><strong>安装 Maven</strong>：用于构建和管理项目依赖</li>
                        <li class="text-gray-700"><strong>安装 Postman</strong>：用于测试 API 接口</li>
                        <li class="text-gray-700"><strong>准备 Deepseek 模型</strong>：确保你已经有一个训练好的问答模型（如 <code class="bg-gray-100 px-2 py-1 rounded">qa_model.ds</code>）</li>
                    </ol>
                </div>
                <div class="bg-gray-50 px-6 py-4 border-t">
                    <div class="flex items-center text-sm text-gray-600">
                        <i class="fas fa-info-circle mr-2"></i>
                        <span>确保所有软件版本兼容，避免依赖冲突</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Project Creation Section -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-3 flex items-center">
                <i class="fas fa-project-diagram text-blue-500 mr-3"></i> 3. 创建 Spring Boot 项目
            </h2>
            
            <div class="space-y-12">
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">3.1 初始化项目</h3>
                    <div class="bg-white rounded-xl shadow overflow-hidden mb-6">
                        <div class="p-6">
                            <ol class="list-decimal pl-6 space-y-4">
                                <li class="text-gray-700">打开 <a href="https://start.spring.io/" class="text-blue-600 hover:underline" target="_blank">Spring Initializr</a></li>
                                <li class="text-gray-700">配置项目：
                                    <ul class="list-disc pl-6 mt-2 space-y-2">
                                        <li><strong>Project</strong>：Maven Project</li>
                                        <li><strong>Language</strong>：Java</li>
                                        <li><strong>Spring Boot</strong>：3.1.0</li>
                                        <li><strong>Dependencies</strong>：Spring Web、Spring AI</li>
                                    </ul>
                                </li>
                                <li class="text-gray-700">点击"Generate"下载项目压缩包，并解压到本地</li>
                            </ol>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">3.2 导入项目</h3>
                    <div class="bg-white rounded-xl shadow overflow-hidden">
                        <div class="p-6">
                            <ol class="list-decimal pl-6 space-y-4">
                                <li class="text-gray-700">打开 IntelliJ IDEA，选择 <code class="bg-gray-100 px-2 py-1 rounded">File > Open</code>，导入解压后的项目</li>
                                <li class="text-gray-700">等待 Maven 自动下载依赖</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Integration Section -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-3 flex items-center">
                <i class="fas fa-puzzle-piece text-blue-500 mr-3"></i> 4. 集成 Deepseek 和 Spring AI
            </h2>
            
            <div class="space-y-12">
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.1 添加 Deepseek 依赖</h3>
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="flex items-center bg-gray-800 px-4 py-2">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="text-gray-400 text-sm ml-4">pom.xml</div>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code>&lt;dependency&gt;
    &lt;groupId&gt;ai.deepseek&lt;/groupId&gt;
    &lt;artifactId&gt;deepseek-java&lt;/artifactId&gt;
    &lt;version&gt;1.0.0&lt;/version&gt;
&lt;/dependency&gt;</code></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.2 配置 Spring AI</h3>
                    <div class="code-block rounded-lg overflow-hidden mb-6">
                        <div class="flex items-center bg-gray-800 px-4 py-2">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="text-gray-400 text-sm ml-4">application.properties</div>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code>spring.ai.deepseek.model-path=/path/to/qa_model.ds
spring.ai.deepseek.device=cpu</code></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.3 创建问答服务</h3>
                    <div class="code-block rounded-lg overflow-hidden">
                        <div class="flex items-center bg-gray-800 px-4 py-2">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="text-gray-400 text-sm ml-4">QAService.java</div>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code>package com.ts.demo;

import ai.deepseek.DeepseekModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class QAService {

    private final DeepseekModel model;

    @Autowired
    public QAService(DeepseekModel model) {
        this.model = model;
    }

    public String answer(String question) {
        // 调用 Deepseek 模型进行推理
        return model.infer(question);
    }
}</code></pre>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.4 创建控制器</h3>
                    <div class="code-block rounded-lg overflow-hidden">
                        <div class="flex items-center bg-gray-800 px-4 py-2">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="text-gray-400 text-sm ml-4">QAController.java</div>
                        </div>
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code>package com.ts.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/qa")
public class QAController {

    private final QAService qaService;

    @Autowired
    public QAController(QAService qaService) {
        this.qaService = qaService;
    }

    @PostMapping("/ask")
    public String askQuestion(@RequestBody String question) {
        return qaService.answer(question);
    }
}</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Running the Project -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-3 flex items-center">
                <i class="fas fa-play-circle text-blue-500 mr-3"></i> 5. 运行项目
            </h2>
            
            <div class="bg-white rounded-xl shadow overflow-hidden">
                <div class="p-6">
                    <ol class="list-decimal pl-6 space-y-4">
                        <li class="text-gray-700">在 IntelliJ IDEA 中，右键点击 <code class="bg-gray-100 px-2 py-1 rounded">DemoApplication.java</code>，选择 <code class="bg-gray-100 px-2 py-1 rounded">Run</code></li>
                        <li class="text-gray-700">项目启动后，控制台会输出类似以下信息：
                            <div class="code-block rounded-lg overflow-hidden mt-4">
                                <pre class="text-gray-200 p-4 overflow-x-auto"><code>Started DemoApplication in 2.5 seconds</code></pre>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
        </section>

        <!-- Postman Testing -->
        <section id="demo" class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-3 flex items-center">
                <i class="fas fa-code text-blue-500 mr-3"></i> 6. 使用 Postman 测试 API
            </h2>
            
            <div class="space-y-12">
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">6.1 创建 Postman 请求</h3>
                    <div class="bg-white rounded-xl shadow overflow-hidden">
                        <div class="p-6">
                            <ol class="list-decimal pl-6 space-y-4">
                                <li class="text-gray-700">打开 Postman，点击 <code class="bg-gray-100 px-2 py-1 rounded">New > Request</code></li>
                                <li class="text-gray-700">配置请求：
                                    <ul class="list-disc pl-6 mt-2 space-y-2">
                                        <li><strong>Method</strong>：POST</li>
                                        <li><strong>URL</strong>：<code class="bg-gray-100 px-2 py-1 rounded">http://localhost:8080/api/qa/ask</code></li>
                                        <li><strong>Body</strong>：选择 <code class="bg-gray-100 px-2 py-1 rounded">raw</code>，格式为 <code class="bg-gray-100 px-2 py-1 rounded">JSON</code>，输入以下内容：
                                            <div class="code-block rounded-lg overflow-hidden mt-4">
                                                <pre class="text-gray-200 p-4 overflow-x-auto"><code>{
  "question": "什么是深度学习？"
}</code></pre>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-6 text-gray-800">6.2 发送请求</h3>
                    <div class="bg-white rounded-xl shadow overflow-hidden">
                        <div class="p-6">
                            <ol class="list-decimal pl-6 space-y-4">
                                <li class="text-gray-700">点击 <code class="bg-gray-100 px-2 py-1 rounded">Send</code> 按钮，发送请求</li>
                                <li class="text-gray-700">查看响应结果，例如：
                                    <div class="code-block rounded-lg overflow-hidden mt-4">
                                        <pre class="text-gray-200 p-4 overflow-x-auto"><code>{
  "answer": "深度学习是机器学习的一个分支，通过多层神经网络模拟人脑的学习过程。"
}</code></pre>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Project Structure -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-3 flex items-center">
                <i class="fas fa-folder-open text-blue-500 mr-3"></i> 7. 项目结构
            </h2>
            
            <p class="text-gray-700 mb-6">以下是项目的完整结构：</p>
            
            <div class="bg-white rounded-xl shadow overflow-hidden">
                <div class="p-6">
                    <div class="code-block rounded-lg overflow-hidden">
                        <pre class="text-gray-200 p-4 overflow-x-auto"><code>src/main/java/com/ts/demo/
   ├── DemoApplication.java       # Spring Boot 启动类
   ├── QAController.java          # 控制器
   ├── QAService.java             # 问答服务
   └── DeepseekConfig.java        # Deepseek 配置类（可选）
src/main/resources/
   ├── application.properties     # 配置文件
   └── qa_model.ds                # Deepseek 模型文件</code></pre>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-10">
        <div class="container mx-auto max-w-4xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-bold">技术小馆</h3>
                    <p class="text-gray-400 mt-2">专注于技术分享与学习</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition duration-300 flex items-center" target="_blank">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        <span>http://www.yuque.com/jtostring</span>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'dark',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>